import type { MenuProps } from "antd"
import { Menu } from "antd"
import React, { useEffect } from "react"

import { useLocale } from "@/locales"

type MenuItem = Required<MenuProps>["items"][number]

export const genItems = (newFormat: (arg: string) => string): MenuItem[] => [
	{
		label: newFormat("report.menu_label1"),
		key: newFormat("report.menu_label1")
	},
	{
		label: newFormat("report.menu_label2"),
		key: newFormat("report.menu_label2")
	},
	{
		label: newFormat("report.menu_label3"),
		key: newFormat("report.menu_label3")
	},
	{
		label: newFormat("report.menu_label4"),
		key: newFormat("report.menu_label4")
	},
	{
		label: newFormat("report.menu_label5"),
		key: newFormat("report.menu_label5")
	},
	{
		label: newFormat("report.menu_label6"),
		key: newFormat("report.menu_label6")
	},
	{
		label: newFormat("report.menu_label7"),
		key: newFormat("report.menu_label7")
	},
	{
		label: newFormat("report.menu_label8"),
		key: newFormat("report.menu_label8")
	},
	{
		label: newFormat("report.menu_label9"),
		key: newFormat("report.menu_label9")
	}
]

const VenueMenu: React.FC<any> = props => {
	const { current, setCurrent } = props
	const { newFormat } = useLocale()

	const items = genItems(newFormat)

	useEffect(() => {
		setCurrent(items?.[0]?.key)
	}, [])

	const onClick: MenuProps["onClick"] = e => {
		setCurrent(e.key)
	}

	return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
}

export default VenueMenu
